<script setup>
import { onMounted } from 'vue'
import { useStore } from '../../stores/store'
import { storeToRefs } from 'pinia'

const store = useStore()
const { proList,total } = storeToRefs(store)
onMounted(() =>{
    store.handelProList()
    store.handelTotal()
})

// 分页功能
const changePage = (value) => {
    store.handelPage(value)
}

// 秒杀功能
const isseckillChange = (proid,type,val) => {
    store.handelFlag(proid,type,val)
}

// 推荐功能
const isrecommendChange = (proid,type,val) => {
    store.handelFlag(proid,type,val)
}
</script>

<template>
    <el-table 
    :data="proList" 
    style="width: 100%" 
    height="76vh"
    :border="true"
    >
        <el-table-column prop="category" label="产品分类"/>
        <el-table-column prop="brand" label="产品品牌"/>
        <el-table-column prop="proname" label="产品名称"/>
        <el-table-column label="图片">
            <template #default="scope">
                <el-image :src="scope.row.img1" />
            </template>
        </el-table-column>
        <el-table-column label="是否秒杀">
            <template #default="scope">
                <el-switch
                    :model-value="scope.row.isseckill"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    inline-prompt
                    :active-value="1"
                    :inactive-value="0"
                    @change="(val) => isseckillChange(scope.row.proid,'isseckill',val)"
                />
            </template>
        </el-table-column>
        <el-table-column label="是否推荐">
            <template #default="scope">
                <el-switch
                    :model-value="scope.row.isrecommend"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    inline-prompt
                    :active-value="1"
                    :inactive-value="0"
                    @change="(val) => isrecommendChange(scope.row.proid,'isrecommend',val)"
                />
            </template>
        </el-table-column>
        <el-table-column label="产品价格">
            <template #default="scope">
                ￥{{scope.row.originprice.toFixed(2)}}
            </template>
        </el-table-column>
        <el-table-column prop="discount" label="产品折扣"/>
        <el-table-column prop="sales" label="产品销量"/>
        <el-table-column prop="stock" label="产品库存"/>
    </el-table>
    <div class="page">
        <el-pagination 
        class="page-all"
        background 
        layout="prev, pager, next" 
        :total="total" 
        :default-current-page="1"
        @current-change="changePage"
        />
    </div>
</template>

<style scoped lang="scss">
.page{
    width: 100%;
    height: 5vh;
    margin-top: 6px;
    display: flex;
    justify-content: center;
}
</style>